<!--
 * @FilePath: /fxfzywpt/src/components/ComLegend/index.vue
 * @Description: 
-->
<template>
    <div class="legend">
      <div class="legend-title">{{ props.title }}</div>
      <div class="legend-sub-title">{{ props.subTitle }}</div>
      <div class="legend-list">
        <div class="legend-column" v-for="(column, columnIndex) in columns" :key="columnIndex">
          <div class="legend-item" v-for="(item, itemIndex) in column" :key="itemIndex">
            <div class="legend-color" :style="{ backgroundColor: item.color, width:item.w+'px', height:item.h+'px', borderRadius:item.r+'%'}"></div>
            <div class="legend-label">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, defineProps, computed } from 'vue';
  
  const props = defineProps({
    title: String,
    subTitle: String,
    items: Array,
    itemsPerColumn: {
      type: Number,
      default: 10,
    },
  });
  
  const columns = computed(() => {
    const columns = [];
    for (let i = 0; i < props.items.length; i += props.itemsPerColumn) {
      columns.push(props.items.slice(i, i + props.itemsPerColumn));
    }
    return columns;
  });
  </script>
  
  <style scoped>
  .legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(48, 96, 255, 0.15);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #0190f9;
    padding: 12px 12px 0 12px;
  }
  
  .legend-title {
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 23px;
    margin-bottom: 5px;
  }
  
  .legend-sub-title {
    font-size: 12px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 23px;
  }
  .legend-list {
    display: flex;
    margin-top: 15px;
  }
  
  .legend-column {
    flex: 1;
    margin-right: 20px;
  }
  
  .legend-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5px;
  }
  
  .legend-color {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border-radius: 50%; /* Make it a circle */
  }
  
  .legend-label {
    font-size: 8px;
    white-space: nowrap;
    font-family: Helvetica Neue LT Pro-55 Roman, Helvetica Neue LT Pro;
    font-weight: normal;
    color: #939BB4;
    line-height: 23px;
  }
  </style>
  